<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  * {
  margin: 0;
  padding: 0;
  }

  .box {
  width: 560px;
  height: 300px;
  margin: 100px auto;
  position: relative;
  /*overflow: hidden;*/
  }

  .box .imageBox {
  list-style: none;
  width: 100%;
  height: 100%;

  }

  .imageBox li {
  position: relative;
  float: left;
  width: 112px;
  height: 100%;
  /*视距属性 近大远小*/
  /*perspective: 500px;*/
  /*3d呈现*/
  transform-style: preserve-3d;
  transition: all 1s linear;
  }

  .imageBox li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  }

  /*image 同一个li下不同span样式*/
  .imageBox li span:nth-child(1) {
  transform: translateZ(150px);
  background: url("name01.jpg") no-repeat;
  }

  .imageBox li span:nth-child(2) {
  transform: rotateX(90deg) translateZ(-150px);
  background: url("name02.jpg") no-repeat;

  }

  .imageBox li span:nth-child(3) {
  transform: rotateX(180deg) translateZ(150px);
  background: url("name03.jpg") no-repeat;

  }

  .imageBox li span:nth-child(4) {
  transform: rotateX(270deg) translateZ(150px);
  background: url("name04.jpg") no-repeat;

  }

  /*imageBox 不同li下 span样式*/
  .imageBox li:nth-child(1) span {
  background-position: 0 0;
  }

  .imageBox li:nth-child(2) span {
  background-position: -112px 0;
  }

  .imageBox li:nth-child(3) span {
  background-position: -224px 0;
  }

  .imageBox li:nth-child(4) span {
  background-position: -336px 0;
  }

  .imageBox li:nth-child(5) span {
  background-position: -448px 0;
  }

  /*左右焦点样式*/
  .box .left, .box .right {
  position: absolute;
  width: 50px;
  height: 70px;
  background-color: rgba(0, 0, 0, .3);
  line-height: 70px;
  top: 50%;
  display: block;
  color: #fff;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  margin-top: -35px;
  }

  .box .right {
  right: 0;
  }
  </style>
  <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
  <!--3d立体轮播图-->
  <section class="box">
  <ul class="imageBox">
  <!--把宽度分为5个部分-->
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>

  </ul>
  <!--转义符 \ 实体：$lt;-->
  <a href="javascript:;" class="left">&lt; </a>
  <a href="javascript:;" class="right">&gt; </a>
  </section>

  <script>

    $(function () {
    /*1.设置索引
    * 2. 给左右按钮注册点击事件
    * 3. 沿x轴旋转
    * 4. 节流阀控制动画完成下一次动画才可以开始*/
    // 先关闭一次定时器，以为默认鼠标在box元素外，不关闭则开启了两个定时器
    clearInterval(timeId);
    var index = 0;
    var flag=true;
    $('.left').on('click', function () {
    if(!flag) return;
    flag=false;
    index--;
    var angel = -index * 90;
    $('li').css('transform', 'rotateX(' + angel + 'deg)').each(function (i, item) {
    $(this).css('transition-delay',i*0.25+"s");
    })
    });
    $('.right').on('click', function () {
    if(!flag) return;
    flag=false;
    index++;
    var angel = -index * 90;
    $('li').css('transform', 'rotateX(' + angel + 'deg)').each(function (i, item) {
    $(this).css('transition-delay',i*0.25+"s");
    })
    });
    // 做过渡完成后时间判断
    $('.imageBox li:last').on('transitionend',function () {
    flag=true;
    });
    // 定时播放
    var timeId=setInterval(function(){
    $('.box .right').trigger('click');
    },2000);
    // 当鼠标进入box容器，停止定时器
    $('.box').on('mouseenter',function(){
    clearInterval(timeId);
    })
    // 当鼠标离开box容器，开启定时器
    $('.box').on('mouseleave',function(){
    timeId=setInterval(function(){
    $('.box .right').trigger('click');
    },3000);
    })

    })
  </script>
</body>
</html>
